<!--工艺系列内容-->
<template>
  <div class="series-con">
    <div class="produce-data-prat series-part" v-if="!isPeiyao">
      <series-part-bar title="数据项" @isOpenEmit="isOpenProduceFunc"></series-part-bar>
      <div class="series-con" v-show="!isOpenProduce">
        <div class="series-con-list">
          <seriesParams :disabled="disabled" v-for="(paramItem, paramIndex) in seriesData.seriesParamsArray" :seriesParamDetail="paramItem" :key="paramIndex"> </seriesParams>
        </div>
      </div>
    </div>
    <div class="produce-data-prat series-part" v-if="isPeiyao">
      <series-part-bar title="数据项" @isOpenEmit="isOpenProduceFunc"></series-part-bar>
      <div class="series-con" v-show="!isOpenProduce">
        <div class="series-con-list">
          <seriesPeiyao :disabled="disabled" :seriesData="seriesData"> </seriesPeiyao>
        </div>
      </div>
    </div>
    <div class="park-data-prat series-part" v-if="seriesData.processName != '交接班' && seriesData.processName != '配药'">
      <series-part-bar :disabled="disabled" :title="seriesData.parkingList && seriesData.parkingList.length ? '停车记录' : `停车记录（总计${(seriesData.parkingDetail && seriesData.parkingDetail.total) || 0}小时）`" :isBtn="true" @isOpenEmit="isOpenParkFunc" :timeDifferenceList="timeDifferenceList" @addEmit="handleAddEmit"></series-part-bar>
      <div v-show="!isOpenPark">
        <template v-if="seriesData.parkingList && seriesData.parkingList.length">
          <parking :disabled="disabled" v-for="(pItem, pIndex) in seriesData.parkingList" :parkingList="seriesData.parkingList" :parkingDetail="pItem" :key="pIndex" :pIndex="pIndex" @timeDifference="timeDifferenceFunc" @handleDeleteParkingEmit="handleDeleteParkingFunc"></parking>
        </template>
        <template v-if="seriesData.parkingDetail">
          <parking :disabled="disabled" :parkingDetail="seriesData.parkingDetail" :pIndex="0" @timeDifference="timeDifferenceFunc" @handleDeleteParkingEmit="handleDeleteParkingFunc"></parking>
        </template>
      </div>
    </div>
    <div class="remarks-data-prat series-part" v-if="seriesData.processName != '交接班' && (!disabled || seriesData.remark)">
      <div class="series-con">
        <div class="series-con-list">
          <div class="series-con-item series-con-full">
            <div class="series-con-label">备注：</div>
            <div class="series-con-box ">
              <textarea @blur="dataSave" :disabled="disabled" v-model="seriesData.remark" maxlength="100"></textarea>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import seriesPartBar from './seriesPartBar';
import parking from './parking';
import seriesParams from './seriesParams';
import seriesPeiyao from './seriesPeiyao';
export default {
  name: 'seriesCon',
  data() {
    return {
      isOpenPark: false,
      isOpenProduce: false,
      timeDifferenceList: [],
    };
  },

  components: {
    seriesPartBar,
    parking,
    seriesParams,
    seriesPeiyao,
  },

  computed: {
    isPeiyao() {
      if (this.seriesData) {
        return this.seriesData.processName === '配药';
      }
      return false;
    },
  },
  props: {
    seriesData: {
      type: Object,
      default() {
        return {};
      },
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },

  mounted() {},

  methods: {
    isOpenParkFunc(value) {
      this.isOpenPark = value;
    },
    isOpenProduceFunc(value) {
      this.isOpenProduce = value;
    },
    handleAddEmit() {
      this.seriesData.parkingList.unshift({ id: '', productFillDataDetailId: '', startTime: '', endTime: '', remark: '' });
    },
    handleDeleteParkingFunc(index) {
      this.seriesData.parkingList.splice(index, 1);
      this.timeDifferenceList.splice(index, 1);
    },
    timeDifferenceFunc(data) {
      this.$set(this.timeDifferenceList, data.value, data.data);
    },
    dataSave() {
      this.$store.commit('changeProduceDataStatus');
    },
  },
};
</script>
<style lang="less" scoped>
.series-con {
  .series-part {
    padding-bottom: 10px;
    .series-con-list {
      padding: 10px;
      .series-con-item {
        display: flex;
        // align-items: center;
        // flex-direction: column;
        padding: 4px 0;
        .series-con-label {
          width: 130px;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.6);
        }
        .series-con-box {
          flex: 1;
          color: #ffffff;
          font-size: 14px;
          width: 96%;
          input {
            width: 100%;
            border: 0;
            text-align: center;
            color: #ffffff;
            font-size: 14px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.6);
            &:readonly {
              background: none;
              color: #ffffff;
              // -webkit-text-fill-color:#ffffff;
            }
            &.full {
              width: 100%;
            }
          }
          input::-webkit-input-placeholder {
            /* Chrome/Opera/Safari */
            color: rgb(111, 111, 119);
          }
          input::-moz-placeholder {
            /* Firefox 19+ */
            color: rgb(111, 111, 119);
          }
          input:-ms-input-placeholder {
            /* IE 10+ */
            color: rgb(111, 111, 119);
          }
          input:-moz-placeholder {
            /* Firefox 18- */
            color: rgb(111, 111, 119);
          }
        }
      }
      .series-con-full {
        flex-direction: column;
        .series-con-label {
          width: 100%;
        }
      }
    }
  }
  // .park-data-prat {
  //   .series-con {
  //     margin-top: 10px;
  //     background: #292a4d;
  //     .series-con-delete {
  //       padding: 10px 10px 10px 0 ;
  //       font-size: 14px;
  //       text-align: right;
  //       text-decoration: underline;
  //       color: #456de6;
  //       border-bottom: 1px solid #464656;
  //     }
  //   }
  //   .series-con-list {
  //     .series-con-item {
  //       padding: 8px 0;
  //       &.reason {
  //         align-items: flex-start;
  //       }
  //       .series-con-label {
  //         width: 70px;
  //       }
  //       .series-con-box {
  //         &.time {
  //           display: flex;
  //           align-items: center;
  //           border-bottom: 1px solid #dedede;
  //         }
  //         .time-text {
  //           flex: 1;
  //         }
  //         .time-span {
  //           width: 120px;
  //           height: 20px;
  //           padding: 0 4px;
  //         }
  //         textarea {
  //           width: 100%;
  //           height: 80px;
  //           border: 0;
  //           color: #22233f;
  //           font-size: 14px;
  //           padding: 8px;
  //           border-radius: 2px;
  //         }
  //       }
  //     }
  //   }
  // }
  .remarks-data-prat {
    .series-con-list {
      .series-con-item {
        align-items: flex-start;
        .series-con-label {
          width: 70px;
        }
        .series-con-box {
          width: 96%;
          textarea {
            width: 100%;
            height: 80px;
            border: 0;
            background: #ffffff;
            color: #22233f;
            font-size: 14px;
            padding: 8px;
            border-radius: 2px;
          }
        }
      }
    }
  }
}
</style>
